<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/base.css">
		<style>
			/* 当前页面内部样式 */
		.db-search{
			margin: .3rem .4rem .2rem;
		}
	</style>
	</head>
	<body>
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<h1 class="mui-title">热映</h1>
		</header>

		<!-- 内容主容器 -->
		<div class="mui-content" id="app">

			<!-- 搜索框 -->
			<div class="mui-input-row mui-search db-search">
				<input type="search" class="mui-input-clear" placeholder="电影/电视剧/影人">
			</div>

			<!-- 图文电影列表 -->
			<!--下拉刷新容器-->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<!-- <ul class="mui-table-view mui-table-view-chevron"></ul> -->
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell mui-media" v-for="item in movies" :key="item.id" @tap="lookDetail(item.id)">
							<a class="mui-navigate-right">
								<img class="mui-media-object mui-pull-left" :src="item.images.large">
								<div class="mui-media-body">
									{{item.title}}
									<p class='mui-ellipsis'>剧情/战争 <span>{{item.rating.average}}分</span></p>
									<p class='mui-ellipsis'>导演：{{item.directors2}}</p>
									<p class='mui-ellipsis'>主演：{{item.casts2}}</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
			<script src="../js/mui.min.js"></script>
			<script src="../js/vue.js"></script>
			<script>
				let moviesDeatil;
				mui.plusReady(function() {
				
					moviesDeatil = plus.webview.getWebviewById('mDeatil'); // 详细页的窗口对象
					if (!moviesDeatil) {
						console.log(1);
						// 预加载页面
						moviesDeatil = mui.preload({ // 【预加载】自动创建了窗口，加载了文件
							url: '../pages/moviesDeatil.html',
							id: 'mDeatil' // 这个也是webview的id
						})
					}
				})
				let APP = new Vue({
					el: '#app',
					data: {
						// 电影列表
						movies: [],
						pn:1
					},
					methods: {
						lookDetail(id) {
						
								// mui.fire(目标窗口的webview,'自定义事件名',{参数列表})
								mui.fire(moviesDeatil, 'getMovie', {
									mid: id
								})
						
								// mui 提供打开窗口的方法
								mui.openWindow({ // 打开窗口之前
									// url: '../pages/moviesDeatil.html'
									id: 'mDeatil'
								});
							}
						}
				});
				mui.init({
					pullRefresh: {
						container: '#pullrefresh',
						down: {
							auto: false,
							style: 'circle',
							callback: pulldownRefresh
						},
						up: {
							auto: true,
							contentrefresh: '正在加载...',
							contentnomore: '已经到底了...',
							callback: pullupRefresh
						}
					}
				});
				// function pullupRefresh() {
					
				// 	// 豆瓣电影接口
				// 	console.log(111)
				// 	'http://t.yushu.im/v2/movie/in_theaters'
				// 	'http://api.douban.com/v2/movie/in_theaters',
				// 	mui.getJSON('https://m.maoyan.com/ajax/movieOnInfoList',
				// 	{
				// 		start:(APP.pn-1)*10,
				// 		count:10,
				// 		city:'广州',
				// 		// apikey: '0df993c66c0c636e29ecbb5344252a4a'
				// 		apikey:'0df993c66c0c636e29ecbb5344252a4a'
				// 	},
				// 	function(data){	//json对象
				// 		//服务器返回响应，根据响应结果，分析是否登录成功；
						
				// 		// 总数据数量
				// 		let total = data.total;
						
				// 		// let subjects = data.subjects;
				// 		let subjects = data.movieList;
				// 		if(subjects.length>0){
				// 			console.log(JSON.stringify(subjects))
				// 			// 对数据subjects进行相关内容的转换，如：剧情、导演、主演
				// 			let directors;
				// 			let casts;
				// 			subjects.map(function(v){
								
				// 				// 剧情
				// 				v.genres = v.genres.join('/');
								
				// 				// 导演名称
				// 				directors = v.directors;
				// 				let arr = [];
				// 				directors.forEach(function(vv){
				// 					// 数组追加
				// 					arr.push(vv.name);  //  ["管虎","xxx"]
				// 				})
				// 				// 增加多一个导演下标
				// 				v.directors2 = arr.join('/');
								
				// 				// 演员名称
				// 				casts = v.casts;
				// 				let arr2 = [];
				// 				casts.forEach(function(vvv){
				// 					arr2.push(vvv.name);
				// 				})
				// 				// 增加多一个演员下标
				// 				v.casts2 = arr2.join('/');
								
				// 				return v;
				// 			})
							
				// 			// console.log(JSON.stringify(subjects));
							
							
				// 			// 赋值
				// 			APP.movies = APP.movies.concat(subjects);
				// 			// APP.movies = subjects;
				// 			// 页码加1
				// 			APP.pn = APP.pn + 1;
				// 			// 允许上拉加载
				// 			mui('#pullrefresh').pullRefresh().endPullupToRefresh(APP.movies.length>=total?true:false);
				// 		}
				// 	},
				// 	function(xhr,type,errorThrown){
				// 		//异常处理；
				// 		console.log(type);
				// 	});
					
				// }
				
				function pullupRefresh() {
					// 请求豆瓣电影接口
					mui.getJSON(
						'http://t.yushu.im/v2/movie/in_theaters', {
							start: (APP.pn - 1) * 10, // 起始记录的下标，第1页第1条记录是 0
							count: 10, // 每页显示的条数
							city: '广州',
							apikey: '0df993c66c0c636e29ecbb5344252a4a'
						},
						function(data) { //json对象
							//服务器返回响应，根据响应结果，分析是否登录成功；
							// console.log(JSON.stringify(data));		// 输出json字符串进行调试
							// alert(1);
				
							// 电影总数
							let total = data.total;
				
							let subjects = data.subjects;
							if (subjects.length > 0) {
				
								// 对数据subjects进行相关内容的转换，如：剧情、导演、主演
								let directors;
								let casts;
								subjects.map(function(v) {
				
									// 剧情
									v.genres = v.genres.join('/');
				
									// 导演名称
									directors = v.directors;
									let arr = [];
									directors.forEach(function(vv) {
										// 数组追加
										arr.push(vv.name); //  ["管虎","xxx"]
									})
									// 增加多一个导演下标
									v.directors2 = arr.join('/');
				
									// 演员名称
									casts = v.casts;
									let arr2 = [];
									casts.forEach(function(vvv) {
										arr2.push(vvv.name);
									})
									// 增加多一个演员下标
									v.casts2 = arr2.join('/');
				
									return v;
								})
				
								// console.log(JSON.stringify(subjects));
				
				
								// 赋值(数组应该是追加数组)
								APP.movies = APP.movies.concat(subjects);
				
								// 页码加1
								APP.pn = APP.pn + 1;
				
								// 允许/停止上拉加载
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(APP.movies.length >= total ? true : false);
							}
						},
						function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
						});
				
					// 不支持跨域请求
					// mui.ajax('http://api.douban.com/v2/movie/in_theaters',{
					// 	data:{
					// 		start:0,
					// 		count:10,
					// 		city:'广州',
					// 		apikey: '0df993c66c0c636e29ecbb5344252a4a'
					// 	},
					// 	dataType:'json',//服务器返回json格式数据
					// 	type:'get',//HTTP请求类型
					// 	timeout:10000,//超时时间设置为10秒；
					// 	headers:{'Content-Type':'application/json'},	              
					// 	success:function(data){
					// 		//服务器返回响应，根据响应结果，分析是否登录成功；
					// 		alert(data);
					// 	},
					// 	error:function(xhr,type,errorThrown){
					// 		//异常处理；
					// 		console.log(type);
					// 	}
					// });
				}
				
				
				/**
				 * 下拉刷新具体业务实现（加载更多）
				 */
				function pulldownRefresh() {
					// 允许上拉加载
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(false);
					
					// 重置页码为1
					APP.pn = 1;
					
					// 更改数组，清空数组
					APP.movies = [];
					
					// 调用上拉加载函数
					pullupRefresh();
					
				}
				
				
				
			</script>
		
	</body>
</html>
